<template>
  <div>
      <!--申请锁货-->
      <el-dialog
        :close-on-click-modal="false"
        title="申请锁货"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="400px">
        <div>
          <el-form :model="sendForm" size="mini" label-width="120px"  ref="sendForm" :rules="rules">
            <el-form-item label="客户名称：" prop="companyId">
              <el-select
                clearable
                v-model="sendForm.companyId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="querySearch">
                <el-option
                  v-for="item in querySearchList"
                  :key="item.customerId"
                  :label="item.customerName"
                  :value="item.customerId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="锁货商品：" prop="goodsDetailId">
              <span>{{ sendForm.categoryName }}/{{ sendForm.brandName }}/{{ sendForm.goodsSn }}</span>
              <!-- <el-select
                v-else
                v-model="sendForm.goodsDetailId"
                filterable
                placeholder="请选择"
                clearable
                remote
                reserve-keyword
                :remote-method="querySearch1">
                <el-option
                  v-for="(item,index) in goodsList"
                  :key="index"
                  :label="item.goodsSn"
                  :value="item.goodsDetailId">
                </el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="锁货价格：" prop="applyPrice">
               <span>{{ sendForm.applyPrice }}</span>
            </el-form-item>
            <el-form-item label="锁货数量（吨）：" prop="applyNum">
               <el-input style="width:150px;" v-model="sendForm.applyNum"></el-input>
            </el-form-item>
            <el-form-item label="到期时间：" prop="expireTime">
              <el-date-picker
                v-model="sendForm.expireTime"
                :picker-options="pickerOptions1"
                style="width:180px;display: inline-block"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
          </span>
      </el-dialog>

  </div>
</template>
<script>
import {getCustomerList,getGoodsList} from '@/api/allInLine/inquiry'
import {goodsApply} from '@/api/allInLine/goodsApply'
import { mapGetters } from 'vuex'
const defaultSendForm={
  companyId:'',
  goodsDetailId:'',
  applyPrice:'',
  applyNum:'',
  expireTime:'',
  categoryName:'',
  brandName:'',
  goodsSn:'',
  remainNum:'',
  priceId:''
};


export default {
  name: "index",
  data(){
    const isvalidateApplyNum = (rule, value, callback) => {
      if(value){
        if(value>this.sendForm.remainNum){
          callback(new Error('锁货数量不可以大于剩余数量'))
        } else {
          callback()
        }
      }else {
        callback(new Error('请填写锁货数量'))
      }

      };
    return {
      dialogVisible:false,
      btnLoading:false,
      sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
      rules: {companyId:[{required:true,message:'请选择客户',trigger:'blur'}],
              goodsDetailId:[{required:true,message:'请选择锁货商品',trigger:'change'}],
              applyNum:[{required:true,validator:isvalidateApplyNum,trigger:'blur'}],
              expireTime:[{required:true,message:'请选择到期时间',trigger:'change'}],
              },
      type:'',
      querySearchList:[],
      goodsList:[],
      pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() < Date.now()  - 8.64e7;
                    },
                },

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {
    // orderGoodsList().then((res)=>{
    //   this.goodsList = res.list
    // })
  },
  filters: {

  },
  methods:{

    //客户名称输入匹配
    querySearch(queryString){
      if(queryString && queryString!= ''){
        getCustomerList({keywords:queryString}).then((res)=>{
          this.querySearchList = res;
        })
      }
    },

    querySearch1(queryString){
      if(queryString && queryString!= ''){
        getGoodsList({categoryName:'',keywords:queryString,goodsType:'normal'}).then(res=>{
         this.goodsList= res.list
      })
      }
    },
    //显示
    showPop(type,item){
      this.dialogVisible = true;
      this.type = type ? type:'lockGoods'
      this.sendForm = JSON.parse(JSON.stringify(defaultSendForm))
      if(item){
        this.sendForm.categoryName = item.categoryName
        this.sendForm.goodsDetailId = item.goodsDetailId
        this.sendForm.goodsSn = item.goodsSn
        this.sendForm.brandName = item.brandName
        this.sendForm.applyPrice = item.purchasePrice
        this.sendForm.remainNum = item.remainNum
        this.sendForm.priceId = item.priceId
        this.sendForm.applyNum = item.buyMinNum
      }
    },
    //关闭
    handleClose(){
      this.$refs.sendForm.resetFields()
      this.sendForm = JSON.parse(JSON.stringify(defaultSendForm))
      this.dialogVisible = false;
    },

    //确认
    handleConfirm(){
      this.$refs.sendForm.validate(valid=>{
        if(valid){
          this.btnLoading = true
          const data = JSON.parse((JSON.stringify(this.sendForm)))
          delete data.categoryName
          delete data.goodsSn
          delete data.brandName
          delete data.remainNum
          delete data.goodsDetailId
          delete data.applyPrice
        goodsApply(data).then(res=>{
          this.$refs.sendForm.resetFields()
          this.sendForm = JSON.parse(JSON.stringify(defaultSendForm))
          this.btnLoading = false
          this.dialogVisible = false;
          this.$message({
          message: '锁货成功',
          type: 'success',
          duration:1000
          });
          this.$emit('update')
          }).catch(err => {
          this.btnLoading = false
         })
        }
      })
    },

  },
}
</script>

<style  lang="scss">

</style>
